<template>
  <div style="min-height: calc(100vh - .7rem - 40px - .5rem - .1rem)">
    <template v-if="isHavePatent===true">
      <p class="no-patent-tip">未发现此公司的科技信息，请查看其他信息。</p>
    </template>
    <template v-else>
      <div class="card-box">
        <el-card class="elcard" style="flex:1;align-self:normal;">
          <div slot="header" class="hd clearfix">
            <span class="tit">转让许可情况</span>
          </div>
          <div v-show="isHaveData === true">
            <div id="chartTwo" style="width: 100%;height: 360px;font-size:inital"></div>
          </div>
          <div v-if="isHaveData === false" class="no-data">暂无信息</div>
        </el-card>
      </div>
      <div class="card-box">
        <el-card class="elcard" style="flex:1;align-self:normal;">
          <div slot="header" class="hd clearfix">
            <span class="tit">专利质押情况</span>
          </div>
          <div class="table">
            <el-table
              :data="tableData"
              :span-method="objectSpanMethod2"
              style="width: 100%;"
              :header-cell-style="patentHeaderStyle"
              :cell-style="patentCellStyle"
              class="courtList"
            >
              <el-table-column prop="pn" label="涉及专利" width="180">
                <template slot-scope="scope">
                  <a
                    href="javascript:void(0);"
                    @click.stop="goPn(scope.$index, tableData)"
                    class="cilck_link"
                    >{{ scope.row.pn }}</a
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="contractRecordNo"
                label="质押号"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="recordDate"
                label="质押生效日期"
                width="120"
              ></el-table-column>
              <el-table-column prop="transferor" label="出质人"></el-table-column>
              <el-table-column prop="zhiquanren" label="质权人">
                <template slot-scope="scope">
                  <p :title="scope.row.zhiquanren">{{ scope.row.zhiquanren }}</p>
                </template>
              </el-table-column>
              <el-table-column label="质押解除日期" width="120">
                <template slot-scope="scope">
                  <p>{{ scope.row.zhiyaJiechuri }}</p>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="lawTotal"
                :page-size="lawPageSize"
                :current-page.sync="lawCurrentPage"
                @current-change="getLawCurrentPage"
                class="el-pagination"
              ></el-pagination>
            </div>
          </div>
        </el-card>
      </div>
      <div class="card-box">
        <el-card class="elcard" style="flex:1;align-self:normal;">
          <div slot="header" class="hd clearfix">
            <span class="tit">专利纠纷情况</span>
          </div>
          <div class="table">
            <el-table :data="managementTableData">
              <el-table-column
                prop="type"
                label="纠纷类型"
                width="180"
              ></el-table-column>
              <el-table-column prop="pn" label="公开/公告号"></el-table-column>
              <el-table-column
                prop="legalStatus"
                label="法律状态"
              ></el-table-column>
              <el-table-column prop="prosecutor" label="原告">
                <template slot-scope="scope">
                  <p v-html="scope.row.prosecutor"></p>
                </template>
              </el-table-column>
              <el-table-column prop="defendant" label="被告">
                <template slot-scope="scope">
                  <p v-html="scope.row.defendant"></p>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="suitTotal"
                :page-size="suitPageSize"
                :current-page.sync="suitCurrentPage"
                @current-change="getSuitCurrentPage"
                class="el-pagination"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </template>
  </div>
</template>
<script>
import resize from "@/utils/resize";
export default {
  mixins: [resize],
  data() {
    return {
      isHavePatent: null, // 是否有专利
      companyName: this.$route.query.name || "",
      // 专利质押
      tableData: [],
      lawTotal: 0,
      lawCurrentPage: 1,
      lawPageSize: 5,
      spanArr: [],
      spanArr2: [],
      chart: null,
      isHaveData: true,
      chartTwoData: {
        name: [],
        data: [],
        links: []
      },
      patentHeaderStyle: function() {
        return "font-weight: 600; color: #03b38c;";
      },
      patentCellStyle: function() {
        return "color: #7674a3";
      },
      // 专利纠纷
      managementTableData: [],
      managementDialogVisible: false,
      managementDialogContent: "",
      suitTotal: 0,
      suitCurrentPage: 1,
      suitPageSize: 5,
      // 软件著作权信息
      softwareTableData: [],
      softTotal: 0,
      softSkip: 0, // 分页
      softCurrentPage: 1,
      softPageSize: 5,
      // 资质认证
      certificationTableData: [],
      certTotal: 0,
      certSkip: 0,
      certCurrentPage: 1,
      certPageSize: 5,
      dialogVisible: false,
      certDialogData: []
    };
  },
  beforeDestroy() {
    if (!this.chart || !this.chartOne) {
      return;
    }
    this.chart.dispose();
    this.chartOne.dispose();
    this.chart = null;
    this.chartOne = null;
  },
  filters: {
    fil: function(value) {
      if (!value) return "-";
    }
  },
  methods: {
    // 专利质押
    getLawstatus() {
      this.$get(this.$Url.patent.lawstatus, {
        companyName: this.companyName,
        ipi: this.lawCurrentPage,
        ips: this.lawPageSize
      })
        .then(data => {
          // console.log(data)
          let res = data.data && data.data.result;
          if (res) {
            this.lawTotal = res.total;
            this.tableData = [];
            let lawDataList = res.result;
            for (let i = 0; i < lawDataList.length; i++) {
              let lawDataListI = lawDataList[i];
              try {
                let obj = {
                  pn: lawDataListI.pn,
                  contractRecordNo: lawDataListI.dengjihao
                    ? lawDataListI.dengjihao
                    : "",
                  recordDate: lawDataListI.dengjishengxiaori
                    ? `${lawDataListI.dengjishengxiaori.substr(
                        0,
                        4
                      )}-${lawDataListI.dengjishengxiaori.substr(
                        4,
                        2
                      )}-${lawDataListI.dengjishengxiaori.substr(6, 2)} `
                    : "",
                  transferor: lawDataListI.chuzhiren
                    ? lawDataListI.chuzhiren
                    : "",
                  zhiyaJiechuri: lawDataListI.zhiyaJiechuri
                    ? `${lawDataListI.zhiyaJiechuri.substr(
                        0,
                        4
                      )}-${lawDataListI.zhiyaJiechuri.substr(
                        4,
                        2
                      )}-${lawDataListI.zhiyaJiechuri.substr(6, 2)} `
                    : "-",
                  zhiquanren: lawDataListI.zhiquanren
                    ? lawDataListI.zhiquanren
                    : "-"
                };
                this.tableData.push(obj);
              } catch (error) {}
            }
            this.rowspan2();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getLawCurrentPage(val) {
      this.lawCurrentPage = val;
      this.getLawstatus();
    },
    // 转让许可
    getPatentLegal() {
      this.$get(this.$Url.patent.patentLegal, {
        companyName: this.companyName
        //dataType: "patentLegal"
      })
        .then(data => {
          // console.log(data)
          if (data.data) {
            // let patentLegal = data.data.patentLegal;
            let patentLegal = data.data;
            if(patentLegal.transfer.node.length <= 0 && patentLegal.divert.node.length <= 0){
              this.isHaveData = false
              return
            }
            this.chart = this.$echarts.init(
              document.getElementById("chartTwo"),
              // null, {renderer: 'svg'}
            );

            // 转让许可 divert:转让 transfer:许可
            let optionObj = {
              tooltip: {
                trigger: "item",
                alwaysShowContent: false,
                enterable: true,
                confine: true,
                // position: ['10%', '10%'],
                formatter: params => {
                  let dataType = params.dataType;
                  if (dataType === "edge") {
                    let data = params.data.labelName;
                    let arr = data.split(",");
                    let str = "";
                    if (arr.length > 6) {
                      str +=
                        '<p style="width:180px;max-height:200px;margin-bottom:0;overflow-x:hidden;overflow-y:auto">';
                    } else {
                      str +=
                        '<p style="max-height:200px;margin-bottom:0;overflow-x:hidden;overflow-y:auto">';
                    }

                    for (let i = 0; i < arr.length; i++) {
                      if (
                        arr[i].indexOf("（转让）") > -1 ||
                        arr[i].indexOf("（许可）") > -1
                      ) {
                        let pn = arr[i].substr(0, arr[i].indexOf("（"));
                        str += "<span onClick=\"toPatentDetail('"+ pn + "')\"" +
                                  ` style="color:#fff;text-decoration: underline;cursor: pointer;">${arr[i]}</span><br />`
                      } else {
                        str += `${arr[i]}<br />`;
                      }
                    }
                    str += "</p>";
                    return str;
                  } else if (dataType === "node") {
                    return params.name;
                  }
                }
              },
              animationDurationUpdate: 1500,
              animationEasingUpdate: "quinticInOut",
              series: [
                {
                  type: "graph",
                  symbolSize: "20",
                  edgeSymbol: ["", "arrow"],
                  data: [],
                  links: [],
                  roam: true,
                  label: {
                    normal: {
                      show: true,
                      formatter: "{b}"
                    }
                  },
                  lineStyle: {
                    normal: {
                      color: "source"
                    }
                  }
                }
              ]
            };
            this.chart.setOption(optionObj);

            // 获取关系图节点data参数
            let chartTwoData = {
              name: [],
              data: [],
              links: []
            };
            for (let i = 0; i < patentLegal.transfer.node.length; i++) {
              let node = patentLegal.transfer.node[i];
              if (node !== "") {
                if (node.length > 8) {
                  node = node.slice(0, 8) + "\n" + node.slice(8);
                }
                chartTwoData.name.push(node);
              }
            }
            for (let j = 0; j < patentLegal.transfer.link.length; j++) {
              let node = patentLegal.transfer.link[j].target;
              if (node !== "") {
                if (node.length > 8) {
                  node = node.slice(0, 8) + "\n" + node.slice(8);
                }
                chartTwoData.name.push(node);
              }
            }
            for (let i = 0; i < patentLegal.divert.node.length; i++) {
              let node = patentLegal.divert.node[i];
              if (patentLegal.divert.node[i] !== "") {
                if (node.length > 8) {
                  node = node.slice(0, 8) + "\n" + node.slice(8);
                }
                chartTwoData.name.push(node);
              }
            }
            for (let j = 0; j < patentLegal.divert.link.length; j++) {
              let node = patentLegal.divert.link[j].target;
              if (patentLegal.divert.link[j].target !== "") {
                if (node.length > 8) {
                  node = node.slice(0, 8) + "\n" + node.slice(8);
                }
                chartTwoData.name.push(node);
              }
            }
            chartTwoData.name = Array.from(new Set(chartTwoData.name));

            let color = [
              "#6485fd",
              "#1fd8bd",
              "#7374f1",
              "#64c7f5",
              "#405ada",

              "#dda4ff",
              "#cd9576",
              "#fe9e86",
              "#ff6464",
              "#ffbb43",

              "#5ff9a8",
              "#40ddff",
              "#6a8ae5",
              "#e85a90",
              "#353f84",

              "#5d76b0",
              "#7f90ae",
              "#40ddff",
              "#a2a8ef",
              "#b33c5a"
            ];
            for (let i = 0; i < chartTwoData.name.length; i++) {
              let name = chartTwoData.name[i];
              let obj = {
                name: name,
                labelName: name,
                label: {
                  position: "bottom",
                  color: "#222"
                  // color: '#fff'
                }
                // symbolOffset: ['-25%', 0]
              };
              if (i > 50) {
                obj = {
                  ...obj,
                  itemStyle: {
                    normal: {
                      color: color[i % 51]
                    }
                  }
                };
              } else {
                obj = {
                  ...obj,
                  itemStyle: {
                    normal: {
                      color: color[i]
                    }
                  }
                };
              }
              chartTwoData.data.push(obj);
            }
            if (chartTwoData.data.length <= 2) {
              for (let i = 0; i < chartTwoData.data.length; i++) {
                chartTwoData.data[i].x = 300 + 300 * i;
                chartTwoData.data[i].y = 50;
              }
            }

            // 如果nodes节点只有一个则不展示
            if (chartTwoData.data.length <= 1) {
              this.divertNum = 0;
              return;
            }

            this.chartTwoData.name = chartTwoData.name;
            this.chartTwoData.data = chartTwoData.data;

            // 获取关系图links参数
            let transferLinkData = JSON.parse(
              JSON.stringify(patentLegal.transfer.link)
            );
            for (let j = 0; j < transferLinkData.length; j++) {
              transferLinkData[j].pn2 = transferLinkData[j].pn;
              for (let k = j + 1; k < transferLinkData.length; k++) {
                if (
                  transferLinkData[j].src === transferLinkData[k].src &&
                  transferLinkData[j].target === transferLinkData[k].target
                ) {
                  transferLinkData[
                    j
                  ].pn2 += `（许可）,${transferLinkData[k].pn}`;
                  transferLinkData.splice(k, 1);
                  k--;
                }
              }

              let src = transferLinkData[j].src;
              let target = transferLinkData[j].target;
              if (src.length > 8) {
                src = src.slice(0, 8) + "\n" + src.slice(8);
              }
              if (target.length > 8) {
                target = target.slice(0, 8) + "\n" + target.slice(8);
              }

              let obj = {
                source: src,
                target: target,
                name: transferLinkData[j].pn2,
                labelName: `${transferLinkData[j].pn2}（许可）`,
                lineStyle: {
                  color: "#aaa",
                  curveness: "0.1"
                }
              };
              chartTwoData.links.push(obj);
            }

            let divertLinkData = JSON.parse(
              JSON.stringify(patentLegal.divert.link)
            );
            for (let j = 0; j < divertLinkData.length; j++) {
              divertLinkData[j].pn2 = divertLinkData[j].pn;
              for (let k = j + 1; k < divertLinkData.length; k++) {
                if (
                  divertLinkData[j].src === divertLinkData[k].src &&
                  divertLinkData[j].target === divertLinkData[k].target
                ) {
                  divertLinkData[j].pn2 += `（转让）,${divertLinkData[k].pn}`;
                  divertLinkData.splice(k, 1);
                  k--;
                }
              }

              let src = divertLinkData[j].src;
              let target = divertLinkData[j].target;
              if (src.length > 8) {
                src = src.slice(0, 8) + "\n" + src.slice(8);
              }
              if (target.length > 8) {
                target = target.slice(0, 8) + "\n" + target.slice(8);
              }

              let obj = {
                source: src,
                target: target,
                name: divertLinkData[j].pn2,
                label: {
                  show: true,
                  position: 'middle',
                  fontWeight: 'normal',
                  align: 'center',
                  lineHeight: 10,
                  textBorderColor: 'transparent',
                  textShadowColor: 'transparent',
                  color: '#2c3e50',
                  formatter: (params) => {
                    let data = params.data
                    let number = data.name.split(',').length
                    let str = ` 转让${number}`
                    return str
                  }
                },
                labelName: `${divertLinkData[j].pn2}（转让）`,
                lineStyle: {
                  color: "#aaa",
                  curveness: "0.2"
                },
              };
              if (divertLinkData.length <= 1) {
                obj["lineStyle"] = {
                  color: "#aaa"
                };
              }
              chartTwoData.links.push(obj);
            }

            this.chartTwoData.links = chartTwoData.links;

            if (
              this.chartTwoData.data.length <= 0 ||
              this.chartTwoData.links.length <= 0
            ) {
              this.isHaveData = false;
            } else {
              this.isHaveData = true;
            }
            let option = {};
            option = {
              animationDurationUpdate: 1500,
              animationEasingUpdate: "quinticInOut",
              series: [
                {
                  type: "graph",
                  layout: "circular",
                  draggable: true,
                  symbol: "circle",
                  // symbol: 'rect',
                  symbolSize: (value, params) => {
                    // return [36 + params.name.length * 10, 24]
                    return 24;
                    // return [140, 36]
                  },
                  // symbolOffset: [0, '150%'],
                  edgeSymbol: ["", "arrow"],
                  edgeSymbolSize: [0, 10],
                  roam: true,
                  focusNodeAdjacency: false,
                  lineStyle: {
                    normal: {
                      color: "source"
                    }
                  },
                  data: this.chartTwoData.data,
                  links: this.chartTwoData.links
                }
              ]
            };
            // 如何data数据较少，则不旋转标签
            if (this.chartTwoData.data.length <= 2) {
              option.series[0]["layout"] = "none";
              option.series[0]["width"] = "30%";
              option.series[0]["force"] = {
                // repulsion: 50,
                // edgeLength: 10,
                // edgeLength: [100, 160]
              };
            } else {
              option.series[0]["height"] = "70%";
              option.series[0]["top"] = "20";
              option.series[0]["force"] = {
                // repulsion: 50,
                // gravity: 0.1,
                // edgeLength: [60, 80]
              };
            }
            this.chart.setOption(option);

            /* window.addEventListener("resize", () => {
                    setTimeout(() => {
                        this.chartTwo.resize();
                    }, 400);
                    });
                    this.$Bus.$on("chartResize", data => {
                    if (data.active === "") {
                        this.$nextTick(() => {
                        this.chartTwo.resize();
                        });
                    }
                    }); */
          }
        })
        .catch(error => {});
    },
    goPn(index, row) {
      let p = row[index].ap || row[index].ZLH || row[index].pn;
      this.$router.push({
        name: "patentDetail",
        query: {
          pn: p,
          active: 1,
          name: this.$route.query.name,
          eid: this.$route.query.eid
        }
      });
    },
    getCurrentPage(val) {
      this.ips = Number(val) - 1;
      //   this.queryOneList()
    },
    // 专利纠纷
    getSuit() {
      this.$get(this.$Url.patent.suit, {
        companyName: this.companyName,
        ipi: this.suitCurrentPage,
        ips: this.suitPageSize
      })
        .then(data => {
          let res = data.data;
          if (res) {
            this.suitTotal = res.total;
            let result = res.result;
            this.managementTableData = [];
            for (let i = 0; i < result.length; i++) {
              let resultI = result[i];
              // 法律状态
              let legalStatus = resultI.legalStatus;
              if (legalStatus === "0") {
                legalStatus = "";
              } else if (legalStatus === "1") {
                legalStatus = "公开";
              } else if (legalStatus === "2") {
                legalStatus = "授权";
              } else if (legalStatus === "3") {
                legalStatus = "失效";
              } else if (legalStatus === "4") {
                legalStatus = "撤回";
              } else if (legalStatus === "5") {
                legalStatus = "驳回";
              }
              // 原告
              let prosecutor = "";
              for (let i = 0; i < JSON.parse(resultI.prosecutor).length; i++) {
                prosecutor += `${JSON.parse(resultI.prosecutor)[i]}`;
                if (i < resultI.prosecutor.length - 1) {
                  prosecutor += `<br/>`;
                }
              }
              // 被告
              let defendant = "";
              for (let i = 0; i < JSON.parse(resultI.defendant).length; i++) {
                defendant += `${JSON.parse(resultI.defendant)[i]}`;
                if (i < resultI.defendant.length - 1) {
                  defendant += `<br/>`;
                }
              }
              let obj = {
                type: "专利纠纷",
                pn: resultI.pn,
                legalStatus: legalStatus,
                prosecutor: prosecutor,
                defendant: defendant
              };
              this.managementTableData.push(obj);
            }
          }
        })
        .catch(error => {});
    },
    getSuitCurrentPage(val) {
      this.suitCurrentPage = val;
      this.getSuit();
    },
    aaa(scope) {
      console.log(scope);
    },
    // 专利纠纷详情弹窗
    managementDetail(index) {
      this.managementDialogVisible = true;
      this.managementDialogContent = this.managementTableData[index].content;
    },
    // 软件著作权信息
    getSoftwareInfo() {
      this.$post(this.$Url.patent.softwareCopyright, {
        name: this.companyName,
        url: "copyrightsoft",
        skip: this.softSkip,
        psize: this.softPageSize
      })
        .then(data => {
          if (data.data) {
            this.softTotal = data.data.total;
            this.softwareTableData = data.data.items;
            this.softwareTableData.forEach((v, index) => {
              v.index = this.softSkip + (index + 1);
            });
          }
        })
        .catch(error => {});
    },
    getSoftCurrentPage(val) {
      this.softCurrentPage = val;
      this.softSkip = (val - 1) * this.softPageSize;
      this.getSoftwareInfo();
    },
    // 资质认证
    qualificationCert() {
      this.$post(this.$Url.patent.certification, {
        name: this.companyName,
        url: "certificate",
        skip: this.certSkip,
        psize: this.certPageSize
      })
        .then(data => {
          if (data.data) {
            this.certTotal = data.data.total;
            this.certificationTableData = data.data.items;
            this.certificationTableData.forEach((v, index) => {
              v.index = this.certSkip + (index + 1);
            });
          }
        })
        .catch(error => {});
    },
    getCertCurrentPage(val) {
      this.certCurrentPage = val;
      this.certSkip = (val - 1) * this.certPageSize;
      this.qualificationCert();
    },
    // 查看详情
    showDetails(scope) {
      this.certDialogData = scope.row;
      this.dialogVisible = true;
    },
    //
    rowspan(data) {
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].name1 === data[i - 1].name1) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 专利质押
    rowspan2() {
      let spanArr2 = [],
        contactDot = 0;
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr2.push(1);
        } else {
          if (item.pn === this.tableData[index - 1].pn) {
            spanArr2[contactDot] += 1;
            spanArr2.push(0);
          } else {
            spanArr2.push(1);
            contactDot = index;
          }
        }
      });
      this.spanArr2 = spanArr2;
    },
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    toPatentDetail(pn) {
      this.$router.push({
        name: 'evalPatentDetail',
        query: {
          pn: pn,
          active: 1,
          name: this.$route.query.name,
          eid: this.$route.query.eid,
        }
      });
    },
  },
  mounted() {
    if (this.$route.query.isHavePatent) {
      this.isHavePatent = this.$route.query.isHavePatent==='true' ? true : false
    }
    if (!this.isHavePatent) {
      this.getLawstatus();
      this.getPatentLegal();
      this.getSuit();
      // 软件著作权信息 暂时注掉
      // this.getSoftwareInfo()
      // 资质认证 暂时注掉
      // this.qualificationCert()
      window.toPatentDetail = this.toPatentDetail;
    }
  }
};
</script>
<style lang="scss" scoped>
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: .5;
  padding: 0 !important;
  text-align: left !important;
  ::v-deep {
    .el-card__header {
      position: relative;
      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 5px;
        height: 30px;
        margin-top: -15px;
        content: '';
        background-color: $color101;
      }
    }
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #EBEEF5;
      margin-bottom: 10px;
    }
  }
}
.el-row {
  background: #fff;
  margin-bottom: 20px;
}
.table {
  padding: 20px;
}
.cilck_link {
  color: #1976d2;
  font-size: 12px;
  text-decoration: underline;
}
.pagination {
  padding-top: 20px;
  text-align: center;
}
.no-data {
  line-height: 40px;
  text-align: center;
}
.no-patent-tip {
  width: 100%;
  line-height: 1rem;
  padding: .1rem 0;
  font-size: .18rem;
  text-align: center;
  color: $color104;
}
</style>